<template>
    <div>

        <div style="margin-top: 20%;">
            <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
                <el-form-item label="账号:" label-width="20%">
                    <el-input placeholder="请输入账号" v-model="ruleForm.login_name"
                              style="margin-bottom: 18px; width: 85%"/>
                </el-form-item>

                <el-form-item label="密码:" label-width="20%">
                    <el-input placeholder="请输入密码" v-model="ruleForm.password" type="password"
                              style="margin-bottom: 18px; width: 85%" @keyup.native.enter="login"/>
                </el-form-item>
            </el-form>

            <div style="text-align:center;">
                <el-button type="primary" style="width: 80%;" @click.native="login()">登录</el-button>
            </div>
        </div>

    </div>
</template>


<script>

    import {setToken} from "../utils/dataStorage";
    import {LoginApi} from "../api/api";

    export default {
        data() {
            return {
                ruleForm: {
                    login_name: '',
                    password: ''
                },

            };
        },
        methods: {
            login() {
                LoginApi({
                    userName: this.ruleForm.login_name,
                    password: this.ruleForm.password
                }).then(data => {
                    setToken(data.token);
                    this.$router.push("/test");
                }).catch(_ => {
                });
            },
        },
        created() {
        }
    }

</script>

<style>


</style>
